<template>
  <div style="padding-top: 20px">
    <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition" animated>
      <a-tab-pane :key="key" :tab="key" v-for="(value, key) in productTypes">
        <a-row :gutter="[16,16]">
          <a-col :span="6" v-for="product in value">
            <a-card hoverable>
              <template #cover>
                <img alt="example" :src="`http://localhost:9763${product.image}`" style="width: 100%; height: 200px"/>
              </template>
              <a-card-meta :title="product.name">
                <template #description>
                  <div class="gwc-warp" style="">
                    <div style="color: red;">
                      ￥ {{ product.price.toFixed(2) }}
                    </div>
                    <div class="gwc-bj" @click="showModal(product)">
                      立即购买
                      <ShoppingCartOutlined/>
                    </div>
                  </div>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </div>


  <a-modal v-model:open="open" :title="productData.name" @ok="handleOk"
           :width="800" :footer="null" :maskClosable="false">
    <div class="product-warp">
      <div class="left">
        <img :src="`http://localhost:9763${productData.image}`" style="width: 200px; height: 200px; border-radius: 4px"/>
      </div>
      <div class="right">
        <p><span>单价：</span>￥{{ productData.price }}</p>
        <p><span>销量：</span>{{ productData.sales }}</p>
        <p><span>库存：</span>{{ productData.inventory }}</p>


        <div style="display: flex; ">
          <a-input-number prefix="数量：" v-model:value="productData.num" :min="1" :max="999"
                          style="margin-right: 20px; width: 200px"/>
          <a-button type="primary" @click="onBuy(productData)">立即购买</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>


<script setup>
import {ref, onMounted} from 'vue';
import {ShoppingCartOutlined} from "@ant-design/icons-vue";
import axios from "axios";
import {message} from "ant-design-vue";

const tabPosition = ref('left');
const activeKey = ref("");


const productData = ref({})
const open = ref(false);
const showModal = (product) => {
  open.value = true;
  productData.value = {...product}
};
const handleOk = e => {
  console.log(e);
  open.value = false;
};


const productTypes = ref({})
const queryProductData = async () => {
  const {data} = await axios.get('http://localhost:9763/system/product/list')

  let obj = {}
  data.rows.forEach(item => {
    if (!obj[item.type]) {
      obj[item.type] = [item]
    } else {
      obj[item.type].push(item)
    }
  })
  productTypes.value = obj
  activeKey.value = Object.keys(obj)[0];

}

const onBuy = async (product) => {
  if (product.num <= 0) {
    message.error('购买数量必须大于0!');
    return false
  }
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const params = {
    productId: product.id,
    productType: product.type,
    productName: product.name,
    image: product.image,
    memberId: userInfo.id,
    memberName: userInfo.nickname,
    num: product.num,
    money: product.num * product.price,
    buyDate: new Date(),
  }
  const {data} = await axios.post('http://localhost:9763/system/order', params)
  if (data.code == 200) {
    message.success('购买成功!');
    queryProductData()
    open.value = false;
  }
}

onMounted(() => {
  queryProductData()
})

</script>


<style scoped>
.gwc-warp {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
}

.gwc-bj {
  background: rgb(233, 122, 85);
  background: linear-gradient(90deg, rgba(233, 122, 85, 0.30575980392156865) 20%, rgba(203, 207, 45, 0.5690651260504201) 62%);
  border-radius: 6px;
  box-shadow: 20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
  padding: 0 10px;
}

.product-warp {
  display: flex;
}

.product-warp .left {
  margin-right: 50px;
}
</style>
